<!-- pdf.vue -->
<template>
  <div class="pdf-container" v-if="show">
    <canvas ref="pdfCanvas" id="pdf-canvas"></canvas>
    <!-- 关闭pdf功能 -->
    <span class="close" @click="closePDF">关闭</span>
    <div class="pagination" v-if="pdfDoc">
      <Button class="left" @click="onPrevPage" v-if="pageNum > 1">上一页</Button>
      <Button class="right" @click="onNextPage" v-if="pageNum < pdfDoc.numPages">下一页</Button>
    </div>
  </div>
</template>

<script>
import PDFJS from 'pdfjs-dist'
PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'

export default {
  name: 'pdf',
  data () {
    return {
      show: false, // pdf渲染or不渲染
      pdfDoc: null, // 一个pdf对象，里面有页数信息等
      pageNum: 1, // 当前页码
      pageRendering: false, // 当前页是否正在渲染
      pageNumPending: null, // 当前待渲染的页码
      scale: 1.25 // 缩放倍数，1表示原始大小
    }
  },
  methods: {
    // 关闭pdf
    closePDF () {
      this.show = false
    },
    // 显示pdf
    showPDF (url) {
      this.show = true
      PDFJS.getDocument(url).then(pdf => {
        this.pdfDoc = pdf
        this.renderPage(1)
      })
    },
    // 渲染pdf
    renderPage (num) {
      this.pageRendering = true
      // Get PDF page
      this.pdfDoc.getPage(num).then(page => {
        let viewport = page.getViewport(this.scale)
        let canvas = this.$refs.pdfCanvas
        canvas.height = viewport.height
        canvas.width = viewport.width
        // Render PDF page into canvas context
        let renderContext = {
          canvasContext: canvas.getContext('2d'),
          viewport: viewport
        }
        // Wait for rendering to finish
        let renderTask = page.render(renderContext)
        renderTask.promise.then(() => {
          this.pageRendering = false
          if (this.pageNumPending !== null) {
            // New page rendering is pending
            this.renderPage(this.pageNumPending)
            this.pageNumPending = null
          }
        })
      })
    },
    // 获取pdf的内容
    async getPDFContent (data) {
      let pdfContent = []
      let pdf = await PDFJS.getDocument(data)
      for (let i = 1; i <= pdf.numPages; i++) {
        let page = await pdf.getPage(i)
        let content = await page.getTextContent()
        pdfContent.push(content)
      }
      return pdfContent
    },
    // 页面渲染队列
    queueRenderPage (num) {
      if (this.pageRendering) {
        this.pageNumPending = num
      } else {
        this.renderPage(num)
      }
    },
    // 上一页
    onPrevPage () {
      if (this.pageNum <= 1) {
        return
      }
      this.pageNum--
      this.queueRenderPage(this.pageNum)
    },
    // 下一页
    onNextPage () {
      if (this.pageNum >= this.pdfDoc.numPages) {
        return
      }
      this.pageNum++
      this.queueRenderPage(this.pageNum)
    }
  }
}
</script>

<style lang="less" scoped>
  .pdf-container {
    background-color: rgba(0, 0, 0, 0.788);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    padding: 20px;
    z-index: 100;
    overflow: scroll;

    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      z-index: 200;
      color: #fff;
      cursor: pointer;
    }

    .pagination {
      position: absolute;
      bottom: 50px;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }
</style>
